<template>
  <el-card class="box-card" shadow="never" style="width: 100%">
    <div class="top">
      <div style="line-height: 32px">
        <el-icon class="no-inherit"> <Search /> </el-icon>筛选搜索
      </div>
      <div>
        <el-button @click="reset(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="sreachR">查询结果</el-button>
      </div>
    </div>
    <el-form :model="form" label-width="120px" :inline="true" ref="ruleFormRef">
      <el-form-item label="输入搜索：">
        <el-input
          v-model="form.keyword"
          style="width: 203px"
          placeholder="商品名称"
        />
      </el-form-item>
      <el-form-item label="商品货号：">
        <el-input
          v-model="form.productSn"
          style="width: 203px"
          placeholder="商品货号"
        />
      </el-form-item>
      <el-form-item label="商品分类：">
        <el-select v-model="form.productCategoryId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品品牌：">
        <el-select v-model="form.brandId" placeholder="请选择品牌">
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上架状态：">
        <el-select v-model="form.publishStatus" placeholder="上架状态">
          <el-option label="上架" :value="1" />
          <el-option label="下架" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态：">
        <el-select v-model="form.verifyStatus" placeholder="全部">
          <el-option label="核审通过" :value="1" />
          <el-option label="核审未通过" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="never" class="box-card" style="width: 100%">
    <div class="data-list">
      <div style="line-height: 32px">
        <el-icon class="no-inherit"> <Tickets /> </el-icon>筛选搜索
      </div>
      <div>
        <el-button @click="toAddPro">添加</el-button>
      </div>
    </div>
  </el-card>
  <!-- <el-card shadow="never" body-style="padding:0;border:none" class="box-card"> -->
  <Suspense>
    <el-table
      ref="multipleTableRef"
      :data="showTabel.tableData !== null ? showTabel.tableData : []"
      style="width: 100%"
      border
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="编号">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="商品图片">
        <template #default="scope">
          <el-image :src="scope.row.pic" fit="contain" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称">
        <template #default="scope"
          >{{ scope.row.name }}
          <div>品牌:{{ scope.row.brandName }}</div></template
        >
      </el-table-column>
      <el-table-column align="center" label="价格货号">
        <template #default="scope">
          价格:{{ scope.row.price }}
          <div>货号{{ scope.row.productSn }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签">
        <template #default="scope">
          <div>
            上架:<el-switch
              v-model="scope.row.publishStatus"
              :active-value="1"
              :inactive-value="0"
              @change="publishSwitch(scope.row.id, scope.row.newStatus)"
            />
          </div>
          <div>
            新品:<el-switch
              v-model="scope.row.newStatus"
              :active-value="1"
              :inactive-value="0"
              @change="NewSwitch(scope.row.id, scope.row.newStatus)"
            />
          </div>
          <div>
            推荐:<el-switch
              v-model="scope.row.recommandStatus"
              :active-value="1"
              :inactive-value="0"
              @change="recommendSwitch(scope.row.id, scope.row.newStatus)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序">
        <template #default="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column align="center" label="sku库存">
        <template #default="scope"
          ><el-button circle type="primary" @click="showSKU">
            <el-icon><EditPen /></el-icon></el-button
        ></template>
      </el-table-column>
      <el-table-column align="center" label="销量">
        <template #default="scope">{{ scope.row.sale }}</template>
      </el-table-column>
      <el-table-column align="center" label="核审状态">
        <template #default="scope">
          <div>未核审</div>
          <div>
            <el-button type="primary" text>核审详情</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <div><el-button>编辑</el-button></div>
          <div>
            <el-button type="danger" @click="delProduct(scope.row.id, 1)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </Suspense>
  <!-- </el-card> -->
  <div class="bottom">
    <div>
      <el-select v-model="batchOption" clearable>
        <el-option label="商品上架" value="1" />
        <el-option label="商品下架" value="2" />
        <el-option label="设为推荐" value="3" />
        <el-option label="取消推荐" value="4" />
        <el-option label="设为新品" value="5" />
        <el-option label="取消新品" value="6" />
        <el-option label="转移到分类" value="7" />
        <el-option label="移入回收站" value="8" />
      </el-select>
      <el-button
        style="margin-left: 10px"
        @click="batchAction"
        :disabled="batchOption === '' ? true : false"
        >确定</el-button
      >
    </div>
    <div>
      <el-pagination
        v-model:current-page="showTabel.pagination.pageNum"
        v-model:page-size="showTabel.pagination.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="showTabel.pagination.total"
        @size-change="showTabel.handleSizeChange"
        @current-change="showTabel.handleCurrentChange"
      />
    </div>
  </div>

  <!-- sku弹窗 -->
  <el-dialog v-model="skuHidden" title="编辑货物信息" width="30%">
    <div style="margin-bottom: 20px" class="goodsInfo">
      <span>商品货号:</span>
      <el-input style="margin-left: 20px; width: 50%">
        <template #append>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <el-table :data="[]" border>
      <el-table-column property="date" label="SKU编号" />
      <el-table-column property="name" label="颜色" />
      <el-table-column property="address" label="销售价格" />
      <el-table-column property="address" label="商品库存" />
      <el-table-column property="address" label="库存预警值" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="skuHidden = false">取消</el-button>
        <el-button type="primary" @click="skuHidden = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import { addProduct } from "../../request/api";
import useTabel from "../../hooks/useTables";
import { useRouter } from "vue-router";
import {
  ElMenu,
  ElMessage,
  ElMessageBox,
  ElTable,
  FormInstance,
} from "element-plus";
import { actionTip } from "../../utils/actionTip";
import { number } from "echarts";
import qs from "qs";
const ruleFormRef = ref<FormInstance>();
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
let router = useRouter();
const form = reactive({
  brandId: "",
  keyword: "",
  productCategoryId: "",
  productSn: "",
  publishStatus: "",
  verifyStatus: "",
});

const options = [
  {
    value: "Option1",
    label: "789",
  },
  {
    value: "Option2",
    label: "123",
  },
  {
    value: "Option3",
    label: "sad",
  },
  {
    value: "Option4",
    label: "撒大大",
  },
  {
    value: "Option5",
    label: "4651",
  },
];

const option2 = [
  {
    value: "Option1",
    label: "233",
  },
  {
    value: "Option2",
    label: "123",
  },
  {
    value: "Option3",
    label: "多发带你",
  },
  {
    value: "Option4",
    label: "你是猪猪么",
  },
  {
    value: "Option5",
    label: "asdasd",
  },
];

let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTabel(addProduct.proList);

const showTabel = reactive({
  tableData: tableData,
  getTableData: getTableData,
  pagination: pagination,
  handleSizeChange: handleSizeChange,
  handleCurrentChange: handleCurrentChange,
} as any);

let toAddPro = () => {
  router.push("/pms/addProduct");
};

const reset = (formEl: any) => {
  form.brandId = "";
  form.keyword = "";
  form.productCategoryId = "";
  form.productSn = "";
  form.publishStatus = "";
  form.verifyStatus = "";
};

let sreachR = () => {
  let newHook = useTabel(addProduct.serachProList, {
    brandId: form.brandId,
    keyword: form.keyword,
    productCategoryId: form.productCategoryId,
    productSn: form.productSn,
    publishStatus: form.publishStatus,
    verifyStatus: form.verifyStatus,
  });
  showTabel.tableData = newHook.tableData;
  showTabel.getTableData = newHook.getTableData;
  showTabel.pagination = newHook.pagination;
  showTabel.handleSizeChange = newHook.handleSizeChange;
  showTabel.handleCurrentChange = newHook.handleCurrentChange;
};

// 上架
let publishSwitch = (ids: number, publishStatus: number) => {
  addProduct
    .updatePublishStatus({
      ids,
      publishStatus,
    })
    .then((res) => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "修改失败",
      });
    });
};
// 新品
let NewSwitch = (ids: string, newStatus: number) => {
  addProduct
    .updateNewStatus({
      ids,
      newStatus,
    })
    .then((res) => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    });
};
// 推荐
let recommendSwitch = (ids: string, recommendStatus: number) => {
  addProduct
    .updateRecommendStatus({
      ids,
      recommendStatus,
    })
    .then((res) => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    });
};

let delProduct = (ids: number, deleteStatus: number) => {
  actionTip(
    addProduct.deleteStatus,
    {
      ids,
      deleteStatus,
    },
    showTabel.getTableData
  );
};

let skuHidden = ref(false);
let showSKU = () => {
  skuHidden.value = true;
};

// 批量操作
let batchOption = ref("");
let betterFn = (type: number, status: number) => {
  let rows = multipleTableRef.value!.getSelectionRows();
  if (rows.length > 0) {
    let idsArr = [] as number[];
    rows.forEach((i: any) => {
      idsArr.push(i.id);
    });
    switch (type) {
      // 下架操作
      case 1:
        actionTip(
          addProduct.updatePublishStatus,
          {
            ids: idsArr.join(),
            publishStatus: status,
          },
          showTabel.getTableData
        );
        return;
      // 推荐操作
      case 2:
        actionTip(
          addProduct.updateRecommendStatus,
          {
            ids: idsArr.join(),
            recommendStatus: status,
          },
          showTabel.getTableData
        );
        return;

      // 新品操作
      case 3:
        actionTip(
          addProduct.updateNewStatus,
          {
            ids: idsArr.join(),
            newStatus: status,
          },
          showTabel.getTableData
        );
        return;

      // 转移到分类
      case 4:
        ElMessage({
          type: "success",
          message: "修改成功",
        });
        return;
      // 移入回收站
      case 5:
        actionTip(
          addProduct.deleteStatusBatch,
          {
            ids: idsArr.join(),
            deleteStatus: status,
          },
          showTabel.getTableData
        );
        return;
      default:
        ElMessage({
          type: "error",
          message: "数据异常",
        });
        return;
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请先选择要操作数据",
    });
  }
};
let batchAction = () => {
  if (batchOption.value) {
    switch (batchOption.value) {
      // 商品上架
      case "1":
        betterFn(1, 1);
        return;
      // 商品下架
      case "2":
        betterFn(1, 0);
        return;
      // 设为推荐
      case "3":
        betterFn(2, 1);
        return;
      // 取消推荐
      case "4":
        betterFn(2, 0);
        return;
      // 设为新品
      case "5":
        betterFn(3, 1);
        return;
      // 取消新品
      case "6":
        betterFn(3, 0);
        return;
      // 转移到分类
      case "7":
        betterFn(4, 0);
        return;
      // 移入回收站
      case "8":
        betterFn(5, 1);
        return;
      default:
        ElMessage({
          type: "error",
          message: "数据异常",
        });
        return;
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请先选择操作",
    });
  }
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.data-list {
  display: flex;
  justify-content: space-between;
}
.el-icon {
  padding-top: 5px;
  vertical-align: baseline;
}
.box-card {
  margin-bottom: 20px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
